<template>
	<view class="g-search f-bc-whilte" :style="customStyle">
		<view class="u-search f-frowceny f-fz13 f-por" :class="customClass" :style="customSearchStyle" @tap="tapHandler">
			<image src="../../static/icon/icon_search.png" mode="aspectFit" class="u-search-icon f-mr10"></image>
			<input type="text" :value="value" @input="inputHandler" :confirm-type="'search'" @confirm="confirmHandler" :disabled="disabled" :placeholder="placeholder" class="f-f1 f-fc-inp" placeholder-style="color: #BFC2CA;" />
			<view class="u-clear" v-if="value" @tap.stop="clearSearch">
				<text class="icon-roundclosefill" style="color: #D3D3D3;"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {	
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean
		},
		placeholder: {
			type: String,
			default: ''
		},
		customStyle: {
			type: String
		},
		customSearchStyle: {
			type: String
		},
		customClass: {
			type: Array
		}
	},
	data() {
		return {
			
		};
	},
	methods: {
		tapHandler() {
			this.$emit('tap');
		},
		/**
		 * 输入处理函数
		 * */ 
		inputHandler(event) {
			console.log('value---------------');
			console.log(event);
			this.$emit('input',event.detail.value);
		},
		/**
		 * 确认搜索
		 * */ 
		confirmHandler() {
			const that = this;
			that.$emit('search');
		},
		/**
		 * 清除搜索
		 * */ 
		clearSearch() {
			this.$emit('input','');
		}
	},
};
</script>

<style lang="scss" scoped>
.g-search {
	width: 100vw;
	padding: 30rpx;
	
	.u-search {
		height: 68rpx;
		padding-left: 40rpx;
		background: #f5f5f5;
		.u-search-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.u-clear {
		padding: 0 40rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
	}
}
</style>
